<script setup>
import { usePhotoStore } from '@/stores/photoStore'
import TimelineMap from '@/components/TimelineMap.vue'

const store = usePhotoStore()
const activeDate = ref(null)

// 时间线聚合算法
const aggregatedTimeline = computed(() => {
  const months = [...new Set(store.allPhotos
    .map(p => p.date.slice(0, 7)))]
  
  return months.map(month => ({
    month,
    cover: store.allPhotos
      .find(p => p.date.startsWith(month))?.url,
    count: store.allPhotos
      .filter(p => p.date.startsWith(month)).length
  }))
})
</script>

<template>
  <div class="timeline-container">
    <div class="timeline-header">
      <CalendarHeatmap :data="aggregatedTimeline" />
    </div>
    <TimelineMap :photos="store.allPhotos" />
    <div class="storyline-mode">
      <PhotoStoryline 
        v-for="(event, index) in store.aiGeneratedStories"
        :key="index"
        :event="event"
      />
    </div>
  </div>
</template>
<script setup>
import { usePhotoStore } from '@/stores/photoStore'
import TimelineMap from '@/components/TimelineMap.vue'

const store = usePhotoStore()
const activeDate = ref(null)

// 时间线聚合算法
const aggregatedTimeline = computed(() => {
  const months = [...new Set(store.allPhotos
    .map(p => p.date.slice(0, 7)))]
  
  return months.map(month => ({
    month,
    cover: store.allPhotos
      .find(p => p.date.startsWith(month))?.url,
    count: store.allPhotos
      .filter(p => p.date.startsWith(month)).length
  }))
})
</script>

<template>
  <div class="timeline-container">
    <div class="timeline-header">
      <CalendarHeatmap :data="aggregatedTimeline" />
    </div>
    <TimelineMap :photos="store.allPhotos" />
    <div class="storyline-mode">
      <PhotoStoryline 
        v-for="(event, index) in store.aiGeneratedStories"
        :key="index"
        :event="event"
      />
    </div>
  </div>
</template>